// 左侧区域

import LeftSided1 from "./LeftSided1"
import LeftSided2 from "./LeftSided2"
import LeftSided3 from "./LeftSided3"
import LeftSided4 from "./LeftSided4"

export const TextArea = ({ title = "", children, jumpId = "section1" }) => {
  const jumpClick = (id = "section1") => {
    const dom = document.querySelector("#right-container")
    const childDom = document.querySelector(`#${id}`)
    const top = childDom.offsetTop
    dom.scrollTo({
      top: top,
      behavior: "smooth"
    })
  }

  return (
    <div
      onClick={() => jumpClick(jumpId)}
      className="mb-[16px] p-[10px]"
      style={{
        backgroundImage: `url('assistant-decision/weak-desc_bg.png')`,
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      }}
    >
      <div
        className="h-[36px] text-[24px] font-[700] mr-[10px] pl-[54px]"
        style={{
          backgroundImage: `url('assistant-decision/left_title-bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "contain"
        }}
      >
        {title}
      </div>
      <div className="mt-[18px] indent-[2rem] pl-[15px] pr-[15px] pb-[20px]">
        {children}
      </div>
    </div>
  )
}

const LeftSided = ({ title }) => {
  return (
    <div
      className="w-[875px] h-[932px] flex flex-col px-[28px] pt-[15px] pb-[11px] mr-[30px] rounded-[15px]"
      style={{
        backgroundImage: `linear-gradient(179deg, rgba(218,235,255,0.46) 0%, rgba(242,249,255,0.39) 100%)`,
        border: "1px solid white"
      }}
    >
      <div
        className="w-[322px] h-[38px] pl-[36px] text-[22px] font-[900]"
        style={{
          backgroundImage: `url('assistant-decision/top-title_bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover"
        }}
      >
        文字报告
      </div>
      <div className="mt-[24px] h-[42px] ml-[78px] mr-[78px] flex items-center justify-between">
        <div
          className="flex-none h-[21px] w-[132px]"
          style={{
            backgroundImage: `url('assistant-decision/title_left_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover",
            backgroundPosition: "100%"
          }}
        ></div>
        <div className="text-[24px] font-[700] flex-1 text-center">
          {title}审计画像评价
        </div>
        <div
          className="flex-none h-[21px] w-[132px]"
          style={{
            backgroundImage: `url('assistant-decision/title_right_bg.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "contain"
          }}
        ></div>
      </div>
      <div className="mt-[10px] text-center mb-[8px]">（2025年*月*日）</div>
      <div className="flex-1 pr-[5px] overflow-y-auto scroll-smooth custom-scrollbar">
        <LeftSided1 />
        <LeftSided2 />
        <LeftSided3 />
        <LeftSided4 />
      </div>
    </div>
  )
}

export default LeftSided
